<script setup lang="ts">

withDefaults(defineProps<{
  status?: number
}>(), {
  status: 0
})
</script>

<template>
  <div v-if="status===0">
    <el-tooltip
        content="待完成"
        placement="top"
        effect="light"
        :show-arrow="false"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="circle-icon">
        <path fill-rule="evenodd"
              d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16z"
              clip-rule="evenodd"></path>
      </svg>
    </el-tooltip>
  </div>
  
  <div v-if="status===1">
    <el-tooltip
        content="尝试过"
        placement="top"
        effect="light"
        :show-arrow="false"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="progress-icon">
        <path stroke-width="2"
              d="M18 12a6.002 6.002 0 01-5.004 5.918c-.545.09-.996-.366-.996-.918V7c0-.552.451-1.009.996-.918A6.002 6.002 0 0118 12z"></path>
        <path stroke-width="2" d="M21.6 12a9.6 9.6 0 01-9.6 9.6 9.6 9.6 0 119.6-9.6z"
              clip-rule="evenodd"></path>
      </svg>
    </el-tooltip>
  </div>
  
  <div v-if="status===2">
    <el-tooltip
        content="已解决"
        placement="top"
        effect="light"
        :show-arrow="false"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="check-icon">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M21.6 12a9.6 9.6 0 01-9.6 9.6 9.6 9.6 0 110-19.2c1.507 0 2.932.347 4.2.965M19.8 6l-8.4 8.4L9 12"></path>
      </svg>
    </el-tooltip>
  </div>
</template>

<style scoped>

.circle-icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  display: inline-block;
  flex-shrink: 0;
  fill: #1f1f1f1a;
}

.progress-icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: #ffd500;
}

.check-icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: #00b8a3;
}
</style>